<!--
  应用设置页面
  
  包含主题切换、语言切换等全局设置选项
-->

<template>
  <div class="settings-page">
    <div class="settings-header">
      <h1 class="settings-title">
        <span class="title-icon">⚙️</span>
        {{ $t('settings.title') }}
      </h1>
      <p class="settings-subtitle">{{ $t('settings.description') || '个性化您的应用体验' }}</p>
    </div>

    <div class="settings-content">
      
      <!-- 主题设置 -->
      <div class="settings-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="section-icon">🎨</span>
            {{ $t('settings.theme.title') }}
          </h2>
          <p class="section-description">{{ $t('settings.theme.description') }}</p>
        </div>
        
        <div class="setting-item">
          <div class="setting-options">
            <div 
              v-for="themeOption in themeOptions"
              :key="themeOption.value"
              :class="['theme-option', { active: theme === themeOption.value }]"
              @click="handleThemeChange(themeOption.value)"
            >
              <div class="theme-preview">
                <div :class="`theme-demo theme-demo-${themeOption.value}`">
                  <div class="demo-header"></div>
                  <div class="demo-content">
                    <div class="demo-sidebar"></div>
                    <div class="demo-main"></div>
                  </div>
                </div>
              </div>
              <div class="theme-info">
                <div class="theme-name">{{ themeOption.label }}</div>
                <div class="theme-desc">{{ themeOption.description }}</div>
              </div>
              <div v-if="theme === themeOption.value" class="theme-check">✓</div>
            </div>
          </div>
          
          <div class="current-theme-info">
            <span class="current-label">当前主题：</span>
            <span class="current-value">{{ currentThemeText }}</span>
            <span class="theme-indicator" :class="`indicator-${currentTheme}`"></span>
          </div>
        </div>
      </div>

      <!-- 颜色主题设置 -->
      <div class="settings-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="section-icon">🎨</span>
            颜色主题
          </h2>
          <p class="section-description">选择您喜欢的颜色搭配方案</p>
        </div>
        
        <div class="setting-item">
          <div class="color-theme-grid">
            <div 
              v-for="colorOption in colorThemeOptions"
              :key="colorOption.value"
              :class="['color-theme-card', { active: colorTheme === colorOption.value }]"
              @click="handleColorThemeChange(colorOption.value)"
            >
              <div class="color-preview">
                <div class="color-circle" :style="{ backgroundColor: colorOption.color }"></div>
              </div>
              <div class="color-info">
                <div class="color-name">{{ colorOption.name }}</div>
              </div>
              <div v-if="colorTheme === colorOption.value" class="color-check">✓</div>
            </div>
          </div>
          
          <div class="current-color-info">
            <span class="current-label">当前颜色主题：</span>
            <span class="current-value">{{ currentColorTheme }}</span>
            <div class="color-indicator" :style="{ backgroundColor: currentColorValue }"></div>
          </div>
        </div>
      </div>

      <!-- 语言设置 -->
      <div class="settings-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="section-icon">🌐</span>
            {{ $t('settings.language.title') }}
          </h2>
          <p class="section-description">{{ $t('settings.language.description') }}</p>
        </div>
        
        <div class="setting-item">
          <div class="setting-options">
            <div 
              v-for="langOption in languageOptions"
              :key="langOption.value"
              :class="['language-option', { active: language === langOption.value }]"
              @click="handleLanguageChange(langOption.value)"
            >
              <div class="language-flag">{{ langOption.flag }}</div>
              <div class="language-info">
                <div class="language-name">{{ langOption.label }}</div>
                <div class="language-native">{{ langOption.native }}</div>
              </div>
              <div v-if="language === langOption.value" class="language-check">✓</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 通用设置 -->
      <div class="settings-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="section-icon">🔧</span>
            {{ $t('settings.general.title') }}
          </h2>
          <p class="section-description">{{ $t('settings.general.description') }}</p>
        </div>
        
        <div class="setting-item">
          <div class="general-settings">
            <div class="general-option">
              <div class="option-info">
                <div class="option-name">{{ $t('settings.general.autoSave') }}</div>
                <div class="option-desc">自动保存应用状态和设置</div>
              </div>
              <div class="option-control">
                <label class="switch">
                  <input type="checkbox" v-model="generalSettings.autoSave">
                  <span class="slider"></span>
                </label>
              </div>
            </div>
            
            <div class="general-option">
              <div class="option-info">
                <div class="option-name">{{ $t('settings.general.notifications') }}</div>
                <div class="option-desc">显示系统通知和提醒</div>
              </div>
              <div class="option-control">
                <label class="switch">
                  <input type="checkbox" v-model="generalSettings.notifications">
                  <span class="slider"></span>
                </label>
              </div>
            </div>
            
            <div class="general-option">
              <div class="option-info">
                <div class="option-name">{{ $t('settings.general.soundEffects') }}</div>
                <div class="option-desc">启用界面音效反馈</div>
              </div>
              <div class="option-control">
                <label class="switch">
                  <input type="checkbox" v-model="generalSettings.soundEffects">
                  <span class="slider"></span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷操作 -->
      <div class="settings-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="section-icon">⚡</span>
            快捷操作
          </h2>
          <p class="section-description">快速切换常用设置</p>
        </div>
        
        <div class="setting-item">
          <div class="quick-actions">
            <button @click="toggleTheme" class="quick-btn theme-toggle">
              <span class="btn-icon">{{ currentTheme === 'dark' ? '☀️' : '🌙' }}</span>
              <span class="btn-text">切换主题</span>
            </button>
            
            <button @click="toggleLanguage" class="quick-btn lang-toggle">
              <span class="btn-icon">🌐</span>
              <span class="btn-text">{{ language === 'zh-CN' ? 'English' : '中文' }}</span>
            </button>
            
            <button @click="resetSettings" class="quick-btn reset-btn">
              <span class="btn-icon">🔄</span>
              <span class="btn-text">重置设置</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 通知消息 -->
    <div v-if="notification.show" :class="['notification', notification.type]">
      {{ notification.message }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useSettings, type ThemeType, type ColorThemeType, type LanguageType } from '../stores/settings'
import { useI18n } from '../i18n'

const { theme, currentTheme, colorTheme, language, setTheme, toggleTheme, setColorTheme, setLanguage, toggleLanguage } = useSettings()
const { $t } = useI18n()

// 通知状态
const notification = ref({
  show: false,
  message: '',
  type: 'success'
})

// 通用设置
const generalSettings = ref({
  autoSave: true,
  notifications: true,
  soundEffects: false
})

// 主题选项
const themeOptions = computed(() => [
  {
    value: 'light' as ThemeType,
    label: $t('settings.theme.light'),
    description: '明亮清爽的界面风格'
  },
  {
    value: 'dark' as ThemeType,
    label: $t('settings.theme.dark'),
    description: '深色护眼的界面风格'
  },
  {
    value: 'auto' as ThemeType,
    label: $t('settings.theme.auto'),
    description: '根据系统设置自动切换'
  }
])

// 语言选项
const languageOptions = computed(() => [
  {
    value: 'zh-CN' as LanguageType,
    label: $t('settings.language.zh-CN'),
    native: '简体中文',
    flag: '🇨🇳'
  },
  {
    value: 'en-US' as LanguageType,
    label: $t('settings.language.en-US'),
    native: 'English',
    flag: '🇺🇸'
  }
])

// 颜色主题选项
const colorThemeOptions = computed(() => [
  { value: 'blue', name: '蓝色', color: '#007bff' },
  { value: 'green', name: '绿色', color: '#28a745' },
  { value: 'purple', name: '紫色', color: '#6f42c1' },
  { value: 'orange', name: '橙色', color: '#fd7e14' },
  { value: 'red', name: '红色', color: '#dc3545' },
  { value: 'teal', name: '青色', color: '#20c997' },
  { value: 'pink', name: '粉色', color: '#e83e8c' },
  { value: 'indigo', name: '靛蓝', color: '#6610f2' }
])

// 当前主题文本
const currentThemeText = computed(() => {
  const option = themeOptions.value.find(opt => opt.value === theme.value)
  return option ? option.label : theme.value
})

// 当前颜色主题文本
const currentColorTheme = computed(() => {
  const option = colorThemeOptions.value.find(opt => opt.value === colorTheme.value)
  return option ? option.name : colorTheme.value
})

// 当前颜色主题值
const currentColorValue = computed(() => {
  const option = colorThemeOptions.value.find(opt => opt.value === colorTheme.value)
  return option ? option.color : '#007bff'
})

// 主题变更处理
const handleThemeChange = (newTheme: ThemeType) => {
  setTheme(newTheme)
  showNotification(`主题已切换到 ${themeOptions.value.find(opt => opt.value === newTheme)?.label}`, 'success')
}

// 颜色主题变更处理
const handleColorThemeChange = (newColorTheme: ColorThemeType) => {
  setColorTheme(newColorTheme)
  showNotification(`颜色主题已切换到 ${colorThemeOptions.value.find(opt => opt.value === newColorTheme)?.name}`, 'success')
}

// 语言变更处理
const handleLanguageChange = (newLanguage: LanguageType) => {
  setLanguage(newLanguage)
  showNotification(`语言已切换到 ${languageOptions.value.find(opt => opt.value === newLanguage)?.native}`, 'success')
}

// 重置设置
const resetSettings = () => {
  setTheme('auto')
  setColorTheme('blue')
  setLanguage('zh-CN')
  generalSettings.value = {
    autoSave: true,
    notifications: true,
    soundEffects: false
  }
  showNotification('设置已重置为默认值', 'info')
}

// 显示通知
const showNotification = (message: string, type: 'success' | 'error' | 'info' = 'success') => {
  notification.value = {
    show: true,
    message,
    type
  }
  
  setTimeout(() => {
    notification.value.show = false
  }, 3000)
}

// 加载通用设置
const loadGeneralSettings = () => {
  try {
    const saved = localStorage.getItem('general-settings')
    if (saved) {
      const parsed = JSON.parse(saved)
      generalSettings.value = { ...generalSettings.value, ...parsed }
    }
  } catch (error) {
    console.error('加载通用设置失败:', error)
  }
}

// 保存通用设置
const saveGeneralSettings = () => {
  try {
    localStorage.setItem('general-settings', JSON.stringify(generalSettings.value))
  } catch (error) {
    console.error('保存通用设置失败:', error)
  }
}

onMounted(() => {
  loadGeneralSettings()
})

// 监听通用设置变化
import { watch } from 'vue'
watch(generalSettings, () => {
  saveGeneralSettings()
}, { deep: true })
</script>

<style scoped>
.settings-page {
  min-height: 100vh;
  background: var(--bg-primary, #f8f9fa);
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.settings-header {
  text-align: center;
  margin-bottom: 40px;
  color: var(--text-primary, white);
}

.settings-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 10px 0;
  font-size: 2.5em;
  font-weight: 600;
}

.title-icon {
  font-size: 1.2em;
}

.settings-subtitle {
  margin: 0;
  font-size: 1.1em;
  opacity: 0.9;
}

.settings-content {
  max-width: 800px;
  margin: 0 auto;
}

.settings-section {
  background: var(--card-bg, rgba(255, 255, 255, 0.95));
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 24px;
  box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.1));
  backdrop-filter: blur(10px);
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.2));
}

.section-header {
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border-color, #f0f0f0);
  padding-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px 0;
  color: var(--text-primary, #2c3e50);
  font-size: 1.4em;
  font-weight: 600;
}

.section-icon {
  font-size: 1.1em;
}

.section-description {
  margin: 0;
  color: var(--text-secondary, #7f8c8d);
  font-size: 14px;
}

.setting-item {
  margin-bottom: 20px;
}

/* 主题选项 */
.setting-options {
  display: grid;
  gap: 16px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px solid var(--border-color, #e9ecef);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--bg-secondary, #fafafa);
  color: var(--text-primary, #333);
}

.theme-option:hover {
  border-color: var(--primary-color, #007bff);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--primary-bg, rgba(0, 123, 255, 0.15));
}

.theme-option.active {
  border-color: var(--primary-color, #007bff);
  background: var(--primary-light, #e3f2fd);
}

.theme-preview {
  flex-shrink: 0;
}

.theme-demo {
  width: 60px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-color, #ddd);
}

.theme-demo-light {
  background: #ffffff;
}

.theme-demo-dark {
  background: #2c3e50;
}

.theme-demo-auto {
  background: linear-gradient(45deg, #ffffff 50%, #2c3e50 50%);
}

.demo-header {
  height: 8px;
  background: var(--primary-color, #007bff);
}

.demo-content {
  display: flex;
  height: 32px;
}

.demo-sidebar {
  width: 15px;
  background: rgba(0, 123, 255, 0.1);
}

.demo-main {
  flex: 1;
  background: rgba(0, 123, 255, 0.05);
}

.theme-info {
  flex: 1;
}

.theme-name {
  font-weight: 600;
  color: var(--text-primary, #2c3e50);
  margin-bottom: 4px;
}

.theme-desc {
  font-size: 13px;
  color: var(--text-secondary, #7f8c8d);
}

.theme-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--success-color, #28a745);
  color: var(--text-inverse, white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.current-theme-info {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-tertiary, #f8f9fa);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-color, transparent);
}

.current-label {
  color: var(--text-secondary, #6c757d);
  font-size: 14px;
}

.current-value {
  font-weight: 600;
  color: var(--text-primary, #495057);
}

.theme-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border-color, #dee2e6);
}

.indicator-light {
  background: #ffffff;
}

.indicator-dark {
  background: #2c3e50;
}

/* 颜色主题选项 */
.color-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.color-theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border: 2px solid var(--border-color, #e9ecef);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--bg-secondary, #fafafa);
  position: relative;
  color: var(--text-primary, #333);
}

.color-theme-card:hover {
  border-color: var(--primary-color, #007bff);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.color-theme-card.active {
  border-color: var(--primary-color, #007bff);
  background: var(--primary-bg, rgba(0, 123, 255, 0.1));
  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.25);
}

.color-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--bg-primary, rgba(255, 255, 255, 0.8));
  box-shadow: 0 4px 12px var(--shadow-sm, rgba(0, 0, 0, 0.15));
  transition: transform 0.3s ease;
}

.color-theme-card:hover .color-circle {
  transform: scale(1.1);
}

.color-info {
  text-align: center;
}

.color-name {
  font-weight: 600;
  color: var(--text-primary, #2c3e50);
  font-size: 14px;
}

.color-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--success-color, #28a745);
  color: var(--text-inverse, white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.current-color-info {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-tertiary, #f8f9fa);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-color, transparent);
}

.color-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary, rgba(255, 255, 255, 0.8));
  box-shadow: 0 2px 4px var(--shadow-sm, rgba(0, 0, 0, 0.1));
}

/* 语言选项 */
.language-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px solid var(--border-color, #e9ecef);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--bg-secondary, #fafafa);
  color: var(--text-primary, #333);
}

.language-option:hover {
  border-color: var(--success-color, #28a745);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--success-light, rgba(40, 167, 69, 0.15));
}

.language-option.active {
  border-color: var(--success-color, #28a745);
  background: var(--success-light, #e8f5e8);
}

.language-flag {
  font-size: 32px;
  flex-shrink: 0;
}

.language-info {
  flex: 1;
}

.language-name {
  font-weight: 600;
  color: var(--text-primary, #2c3e50);
  margin-bottom: 4px;
}

.language-native {
  font-size: 13px;
  color: var(--text-secondary, #7f8c8d);
}

.language-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--success-color, #28a745);
  color: var(--text-inverse, white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

/* 通用设置 */
.general-settings {
  display: grid;
  gap: 16px;
}

.general-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--bg-tertiary, #f8f9fa);
  border-radius: 10px;
  border: 1px solid var(--border-color, #e9ecef);
  color: var(--text-primary, #333);
}

.option-info {
  flex: 1;
}

.option-name {
  font-weight: 600;
  color: var(--text-primary, #2c3e50);
  margin-bottom: 4px;
}

.option-desc {
  font-size: 13px;
  color: var(--text-secondary, #7f8c8d);
}

.option-control {
  flex-shrink: 0;
}

/* 开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color, #ccc);
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--bg-primary, white);
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary-color, #007bff);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* 快捷操作 */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}

.theme-toggle {
  background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, var(--primary-hover, #764ba2) 100%);
  color: var(--text-inverse, white);
}

.lang-toggle {
  background: linear-gradient(135deg, var(--success-color, #f093fb) 0%, var(--success-hover, #f5576c) 100%);
  color: var(--text-inverse, white);
}

.reset-btn {
  background: linear-gradient(135deg, var(--warning-light, #ffecd2) 0%, var(--warning-color, #fcb69f) 100%);
  color: var(--warning-hover, #8b4513);
}

.quick-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-icon {
  font-size: 18px;
}

/* 通知样式 */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

.notification.success {
  background: var(--success-color, #28a745);
}

.notification.error {
  background: var(--error-color, #dc3545);
}

.notification.info {
  background: var(--info-color, #17a2b8);
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 深色主题适配已经通过CSS变量系统处理，移除冗余的全局样式 */
</style>
